<template>
  <div class="promote-header-page">
    <el-card shadow="always">
      <div slot="header" class="clearfix">
        <line-header
          :title="activeTitle"
        ></line-header>
      </div>
      <div class="card-body-box">
        <el-row>
          <el-col :span="4" v-for="item in topContent" :key="item.name">
            <div class="top-content-box">
              <div
                class="left-line-box"
                :style="`background:${item.color}`"
              ></div>
              <div class="show-content-box">
                <div class="title-box">{{ item.name }}</div>
                <div class="number-box">{{ item.num }}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import lineHeader from "@/components/line-header/index";
import {trace} from "../../utils/trace"

export default {
  components: { lineHeader },
  props: {
    activeName: "",
    activeTitle: "",
  },
  data() {
    return {
      topData:{
        "wordCount": 1,  //关键词数量
        "auditingCount": 1, // 审核中
        "auditFailCount": 0,//审核失败
        "expireCount": 0,//已到期
        "forbidCount": 2,//禁用
        "goingCount": 0//运行
      },
      topContent: [
        {
          name: "关键词数量",
          num: "46 300",
          color: "linear-gradient(0deg,#202020 0%,#1b3bff 0%,#ffffff 100%)"
        },
        {
          name: "审核中",
          num: "30 300",
          color: "linear-gradient(0deg, #FFB128 0%, #FFFFFF 100%);"
        },
        {
          name: "运行中",
          num: "30 300",
          color: "linear-gradient(0deg,#202020 0%,#1b3bff 0%,#ffffff 100%)"
        },
        {
          name: "已到期",
          num: "2700",
          color: "linear-gradient(0deg, #FF1F34 0%, #FFFFFF 100%);"
        },
        {
          name: "审核未通过",
          num: "300",
          color: "linear-gradient(0deg, #FFB128 0%, #FFFFFF 100%);"
        },
        {
          name: "已禁用",
          num: "300",
          color: "linear-gradient(0deg, #FF1F34 0%, #FFFFFF 100%);"
        }
      ]
    };
  },
  watch: {
    activeName:function (a,b,c) {

    }
  },
  computed: {},
  methods: {
    getInfo(){
      let kind = 2;
      if(this.activeName=="one"){
        kind = 1
      }
      this.$store.dispatch('promote/seoSummary', {kind}).then((data) => {

        this.topData = data;

        this.topContent[0].num = data.wordCount>=1000 ? ((data.wordCount+"").in): data.wordCount;
        this.topContent[1].num = data.auditingCount;
        this.topContent[2].num = data.goingCount;
        this.topContent[3].num = data.expireCount;
        this.topContent[4].num = data.auditFailCount;
        this.topContent[5].num = data.forbidCount;
        // this.tableList = data.data;
        // this.total = data.total;
      }).catch((err) => {

      })
    },
  },
  created() {
    this.getInfo();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>

.card-body-box {
  margin: 20px 0;
  .top-content-box {
    display: flex;
    align-items: center;
    .left-line-box {
      width: 7px;
      height: 70px;
      border-radius: 3px;
    }
    .show-content-box {
      margin-left: 18px;
      .title-box {
        font-size: 16px;
        font-weight: 400;
      }
      .number-box {
        margin-top: 15px;
        font-size: 30px;
        font-weight: 400;
      }
    }
  }
}
</style>
